<div class="container">
  <div class="login">
    <h1>FastFrame</h1>
    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixUser">
            <input type="text" nz-input formControlName="username" placeholder="Username">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('username').dirty && validateForm.get('username').errors">Please
            input your username!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixLock">
            <input type="password" nz-input formControlName="password" placeholder="Password">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">Please input your Password!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control>
          <nz-input-group>
            <div nz-row>
              <div nz-col nzSpan="12">
                  <input type="text" nz-input formControlName="captcha" placeholder="captcha">
              </div>
              <div nz-col nzSpan="12">
                  <img style='width: 125px; margin-left: 10px;' [src]='captcha'>
              </div>
            </div>
            
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('captcha').dirty && validateForm.get('captcha').errors">Please input the captcha you got!</nz-form-explain>
          <nz-form-extra>We must make sure that your are a human.</nz-form-extra>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control>
          <label nz-checkbox formControlName="remember">
            <span>记住我</span>
          </label>
          <a class="login-form-forgot" class="login-form-forgot">忘记密码</a>
          <button nz-button class="login-form-button" [nzType]="'primary'" (click)="submitForm()">登录</button>
          <a href="">立即注册</a>
        </nz-form-control>
      </nz-form-item>
    </form>

    <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
    <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>

  </div>
</div>